<template>
  <div id="home">
     <headerNav  title="喜茶购"></headerNav>
     <scroll  :probe-type="1"  ref="scroll" class="scroll-content">
       <div class="container">
         <div class="swiper-box">
           <Banner :swiperList="swiperdata"> </Banner>
         </div>
         <div class="box">
           <div  @click="$router.push('/food')"  class="box-left">
             <div class="box-img">
               <img class="left-img" :src="require('assets/img/home/box-left.png')" alt="">
             </div>
             <p class="box-p1">门店自取</p>
             <p class="box-p2">下单免排队</p>
           </div>
           <div @click="$router.push('/selectAddress')" class="box-right">
             <div class="box-img">
               <img class="left-img" :src="require('assets/img/home/box-right.png')" alt="">
             </div>
             <p class="box-p1">外卖</p>
             <p class="box-p2">无需接送，喜送到家</p>
           </div>
         </div>
         <div class="ads">
           <div  @click="$router.push('/shop')"  class="ads-l">
             <div class="ads-title">
               <div class="ads-img1"><img class="ads-img2" :src="require('assets/img/home/ads-left.png')"  alt=""></div>

               <div class="ads-p">喜茶百货</div>
             </div>
             <div class="ads-body">
               新装气泡水畅饮更尽兴
             </div>
           </div>
           <div class="ads-l">
             <div class="ads-title">
               <div class="ads-img1"><img class="ads-img2" :src="require('assets/img/home/ads-right.png')"  alt=""></div>

               <div class="ads-p">阿喜团聚</div>
             </div>
             <div class="ads-body">
               最高享9折火热预定中
             </div>
           </div>
         </div>
         <div class="footer">
           <div @click="goIntergral" class="footer-l">
             <div class="l-top">
               我的积分  <span>22</span>
             </div>
             <div class="l-buttom">
               可兑换喜茶券和丰富灵感周边
             </div>
           </div>
           <div class="footer-r">
             <div class="r-img">
               <img class="r-img1" :src="require('assets/img/home/huiyuan.png')" alt="">
             </div>
             <div class="r-p" @click="$router.push('/vipcode')">会员码</div>
           </div>
         </div>
       </div>
     </scroll>
  </div> 
</template>

<script>
 import Banner from './childCom/Banner'
 import headerNav from 'components/HeaderNav/headerNav'
 import Scroll from "../../components/scroll/Scroll.vue";
 import {getHomeData} from 'network/index'
export default {
  name: "home",
  components:{
            Banner,
            headerNav,
             Scroll,
        },
        created(){
          getHomeData().then(res=>{
            console.log(res);
          }).catch(err=>{
            console.log(err);
          })
        },
        data(){
          return{
           swiperdata:[require('assets/img/home/1.png'),require('assets/img/home/2.png'),require('assets/img/home/3.png')],
          }
        },
        methods:{
          goIntergral(){
            this.$router.push("/integral")
          }
        }
};
</script>

<style scoped>
   #home{
     overflow: hidden;
        height: 100vh;
     position: relative;
    }
   .scroll-content{
     position: absolute;
     top: 44px;
     bottom: 49px;
     left: 0px;
     right: 0px;

     overflow: hidden;
   }
    .container{
    }
    .swiper-box{
      margin-top: 15px;
    }
    .box{
        margin: 10px 15px 0px;

        height: 185px;
      overflow: hidden;
        background: rgb(255, 255, 255);
      filter: drop-shadow(rgba(0, 0, 0, 0.08) 0px 3px 6px);
        border-radius: 8.5px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .box-left{
        width: 132px;
        height: 132px;
        
    }
    .box-left::before{
        content: ' ';
        position: absolute;
        top:29px;
        left: 50%;
        border-left: 1px solid #d7d7d7d7;
        height: 130px;
    }
    .box-right{
        width: 132px;
        height: 132px;
        
    }
    .box-img{
      text-align: center;
    }
    .left-img{
      margin-top: 10px;
      width: 60px;
      height: 60px;
    }
    .box-p1{
      text-align: center;
      font-weight: bold;
    }
    .box-p2{
      text-align: center;
      font-size: 10px;
      height: 20px;
      line-height: 20px;
    }
    .ads{
      margin: 0 auto;
      width: 100%;
      height: 130px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      
      
    }
    .ads-l{
       flex:1;
        height: 73px;
        background: rgb(234, 235, 236);
        border-radius: 8.5px;
      margin: 0 15px;

    }
    .ads-title{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
    }
    .ads-img1{
      height: 24px;
      width: 24px;
      display: inline-block;
      
    }
    .ads-img2{
      vertical-align: bottom;
      height: 100%;
      width: 100%;
    }
    .ads-p{
      line-height: 28px;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
    }
    .ads-body{
      text-align: center;
      font-size: 10px;
      color: rgb(170, 170, 170);
    }
    .footer{
      height: 80px;
      margin: 0 15px;
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    .l-top{
      font-weight: 500;
    }
    .l-buttom{
      font-size: 10px;
      line-height: 25px;
      height: 25px;
    }
    .footer-r{
      height: 45px;
      width: 38px;
    }
    .footer-l::before{
       content: ' ';
        position: absolute;
        
        right: 20%;
        border-left: 1px solid #d7d7d7d7;
        height: 45px;
    }
    .r-img{
      height: 24px;
      width: 24px;
      margin: 0 auto;
    }
    .r-img1{
      width: 100%;
      height: 100%;
    }
    .r-p{
      font-size: 10px;
      line-height: 25px;
      height: 25px;
    }

</style>